import { mapState } from "vuex"
import CommonForm from '@/components/CommonForm'
import TableLayout from "@/components/TableLayout"
import { getComponentAndCategoryListByParentId } from '@/api/dashboard/component'
import Breadcrumb from "@/components/Breadcrumb"
import AddComponent from "./AddComponent"
import './index.less'

export default {
  data () {
    return {
      formData: {
        name: ''
      },
      formJson: [
        {
          type: "input",
          label: "名称",
          fieldName: "name",
          extraConfig: {
            // className: "row",
          },
          dataType: String,
        }
      ],
      list: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableLoading: true,
      columns: [
        {
          title: '名称',
          dataIndex: 'name',
          width: 80,
          customRender: (text, record, index) => {
            const type = record.type === 1 ? 'file' : 'catalogue'
            return (
              <div onClick={() => this.handleRowClick(text, record)} style="cursor: pointer">
                <c-icon type={type} /> {text}
              </div>
            )
          }
        },
        {
          title: '描述',
          dataIndex: 'description',
          width: 80,
        },
        {
          title: '发布状态',
          dataIndex: 'status',
          width: 80,
        },
        {
          title: '创建时间',
          dataIndex: 'createdAt',
          width: 80,
        },
        {
          title: '创建人',
          dataIndex: 'createdUser',
          width: 80,
        },
        {
          title: '更新时间',
          dataIndex: 'updatedAt',
          width: 80,
        },
        {
          title: '操作',
          dataIndex: 'tool',
          width: 120,
          customRender: (text, record, index) => {
            const {
              id,
              type,
              key
            } = record
            if (type == 1) {
              return (
                <div>
                  <a-button onClick={() => this.handleEditClick([key], [record])}><c-icon type="edit" />编辑</a-button>
                  <a-button onClick={() => this.handleDetailsClick(id)}><c-icon type="details" />预览</a-button>
                </div>
              )
            }
            else {
              return (
                <div>
                  {/* <a-button><c-icon type="edit" />编辑</a-button>
                  <a-button><c-icon type="details" />预览</a-button> */}
                </div>
              )
            }
          }
        },
      ],
      parentId: 0,
      tableHeader: [
        <a-button key="approve-add" onClick={this.handleAddClick} action="add" v-action="lowCode:componentCategoryManager:add"><c-icon type="add" />新增</a-button>,
        <a-button key="approve-delete" onClick={this.handleDeleteClick} action="delete" v-action="lowCode:componentCategoryManager:delete"><c-icon type="delete" />删除</a-button>,
        <a-button key="approve-move" onClick={this.handleMoveClick} action="move" v-action="lowCode:componentCategoryManager:move"><c-icon type="move" />移动</a-button>,
        <a-button key="approve-re-name" onClick={this.handleReNameClick} action="re-name" v-action="lowCode:componentCategoryManager:re-name"><c-icon type="re-name" />重命名</a-button>
      ],
      parentPathList: []
    }
  },
  computed: {

  },
  created () {
  },
  mounted () {
    // this.getComponentAndCategoryList()
  },
  methods: {
    handleSearch (data, resolve) {
      data.params.parentId = this.parentId || 0
      getComponentAndCategoryListByParentId({ ...data })
      // .then(resolve)
      .then(res => {
        resolve({
          ...res,
          records: res.records.map(item => {
            return {
              ...item,
              key: `${item.type}-${item.id}`
            }
          })
        })
      })
    },
    handleAddClick (...args) {
      this.$refs.addComponentRef.show("add")
      console.log('add', ...args)
    },
    handleReNameClick(keys, nodes) {
      if (keys.length !== 1){
        this.$message.warn('请选择一项')
        return
      }
      this.$refs.addComponentRef.show("reName", nodes[0])
    },
    handleMoveClick(keys, nodes) {
      if (keys.length !== 1){
        this.$message.warn('请选择一项')
        return
      }
      this.$refs.addComponentRef.show("move", nodes[0])
    },
    handleDeleteClick (...args) {
      console.log('delete', ...args)
    },
    handleRowClick (text, record) {
      console.log(text, record, this.$refs.tableLayoutRef)
      if (record.type === 1) {

      } else {
        this.parentId = record.id
        this.$refs.tableLayoutRef.resetSearch()
        this.$refs.breadcrumbRef.addNode(record)
      }
    },
    handleEditClick(keys, nodes) {
      if (keys.length !== 1){
        this.$message.warn('请选择一项')
        return
      }
      this.$router.push({ path: '/dashComponent/editDashComponent', query: {id: nodes[0].id} })
    },
    handleSeleceCategory (node) {
      this.parentId = node.value
      this.$refs.tableLayoutRef.resetSearch()
    },
    reSearch() {
      this.$refs.tableLayoutRef.resetSearch()
    },
    handleDetailsClick(id) {
      this.$router.push({ path: '/dashComponent/editDashComponent', query: {id} })
    }
  },
  render (h) {
    const {
      tableHeader,
      formJson,
      columns,
      handleSearch,
      handleSeleceCategory,
      reSearch
    } = this
    return (
      <div class="container">

        <TableLayout
          ref="tableLayoutRef"
          tableHeader={tableHeader}
          formJson={formJson}
          columns={columns}
          search={handleSearch}
          rowKey="key"
          scopedSlots={{
            formBottom: props => {
                return <Breadcrumb ref="breadcrumbRef" onSelect={handleSeleceCategory} />
            }
          }} >
          </TableLayout>
        <AddComponent ref="addComponentRef" onUpdate={reSearch} />
      </div>

    )
  }
}
